<template>
<div class = 'container' @click="handleBtnSmallImg">
  <div class="wrapper">
    <swiper :options="swiperOption" >
      <swiper-slide v-for="(item,index) in imgs" :key="index">
        <img class="gallary-img" :src="item" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</div>
</template>

<script>
export default {
  name:'CommonGallary',
  props:{
    imgs:{
      type:Array,
      default (){
        return []

      }
    }
  },
  data (){
   return {
     swiperList:[],
     swiperOption:{
       pagination:'.swiper-pagination',
       paginationType:'fraction',
       observeParents:true,
       observer:true
     }
   }
  },
  methods:{
    handleBtnSmallImg (){
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
 .container >>> .swiper-container
  overflow inherit
.container
  z-index 99
  display flex
  flex-direction column
  justify-content: center
  position fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  background #000
  .wrapper
    /*overflow: hidden*/
    width: 100%
    padding-bottom 100%
    height: 0
    .gallary-img
      width 100%
    .swiper-pagination
      color #fff
      bottom:-1rem
</style>
